<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>超级象棋</title>
	<link rel="stylesheet" href="./css/common.css" />
</head>
<body>
<div class="container">
	<div class="config-board">
		<h3>游戏设置</h3>
		<table class="config-table">
			<tr class="config-tr">
				<th colspan="4" style="text-align: left;"><label>棋盘设置：(笛卡尔坐标轴)</label></th>
			</tr>
			<tr class="config-tr">
				<td class="config-td">行数（≥1）:</td>
				<td class="config-td-value"><input type="number" id="rows" name="rows" min="1" max="512" value="10"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">列数（≥1）:</td>
				<td class="config-td-value"><input type="number" id="cols" name="cols" min="1" max="512" value="9"></td>
			</tr>
			<tr class="config-tr">
				<th colspan="4" style="text-align: left;"><label>河界设置：</label></th>
			</tr>
			<tr class="config-tr">
				<td class="config-td">红方河界(纵坐标):</td>
				<td class="config-td-value"><input type="number" id="redRiver" min="0" max="512" value="4"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">黑方河界(纵坐标):</td>
				<td class="config-td-value"><input type="number" id="blackRiver" min="0" max="512" value="5"></td>
			</tr>
			<tr class="config-tr">
				<th colspan="2" style="text-align: left;"><label>帅帐九宫格：</label></th>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"帅"上边界:</td>
				<td class="config-td-value"><input type="number" id="redPalaceTop" min="0" max="512" value="2"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"帅"下边界:</td>
				<td class="config-td-value"><input type="number" id="redPalaceBottom" min="0" max="512" value="0"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"帅"左边界:</td>
				<td class="config-td-value"><input type="number" id="redPalaceLeft" min="0" max="512" value="1"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"帅"右边界:</td>
				<td class="config-td-value"><input type="number" id="redPalaceRight" min="0" max="512" value="1"></td>
			</tr>
			<tr class="config-tr">
				<th colspan="2" style="text-align: left;">
					<label>将帐九宫格：</label>
				</th>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"将"上边界:</td>
				<td class="config-td-value"><input type="number" id="blackPalaceTop" min="0" max="512" value="0"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"将"下边界:</td>
				<td class="config-td-value"><input type="number" id="blackPalaceBottom" min="0" max="512" value="2"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"将"左边界:</td>
				<td class="config-td-value"><input type="number" id="blackPalaceLeft" min="0" max="512" value="1"></td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">距离"将"右边界:</td>
				<td class="config-td-value"><input type="number" id="blackPalaceRight" min="0" max="512" value="1"></td>
			</tr>
			<tr class="config-tr">
				<th colspan="2" style="text-align: left;"><label>其他设置：</label></th>
			</tr>
			<tr class="config-tr">
				<td class="config-td">先手玩家:</td>
				<td class="config-td-value">
					<select id="firstMove" name="firstMove">
						<option value="red" selected>红方</option>
						<option value="black">黑方</option>
					</select>
				</td>
			</tr>
			<tr class="config-tr">
				<td class="config-td">棋子布局:</td>
				<td class="config-td-value">
					<select id="layout" name="layout">
					</select>
				</td>
			</tr>
		</table>
		<!-- 开始按钮 -->
		<button id="startBtn" class="button-start" onclick="startGame()">开始</button>
		<button id="resetBtn" class="button-reset" onclick="resetConfig()">重置</button>
		<div id="gameDescription" style="margin: 10px; padding: 8px; background: #f0f0f0; border: 1px solid #ccc; font-weight: bold; text-align: center;">
		    等待开始游戏...
		</div>
		<button id="finishTurnBtn" class="button-finish" onclick="finishAction()">完成回合</button>
		<button id="introduceChessBtn" class="button-introduce" onclick="introduceChess()">棋子介绍</button>
	</div>
	<div class="chess-board">
		<h1>超级象棋 (H5版)</h1>
		<div id="chessboard"></div>
	</div>
</div>
<script src="./js/jquery-3.7.1.js"></script>
<script src="./js/config-layout.js"></script>
<script src="./js/config-chess.js"></script>
<script src="./js/function-game.js"></script>
<script src="./js/function-draw.js"></script>
<script src="./js/function-introduce.js"></script>
<script src="./js/function-action.js"></script>
<script src="./js/function-skill.js"></script>
</body>
</html>